<template>
  <view class="commission">
    <view class="cs_header t-ju-around">
      <view class="cs_hd_left">
        <view>23132.0</view>
        <view>代收佣金(元)</view>
      </view>
      <view class="cs_hd_shu"></view>
      <view class="cs_hd_right">
        <view>123123.0</view>
        <view>累积佣金(元)</view>
      </view>
    </view>
    <!--  -->
    <view class="cs_menu t-ju-around">
      <view class="cs_menu_item t-center">
        <image class="icon" src="../../static/logo.png" mode=""></image>
        <view class="text">
          发放记录
        </view>
      </view>
      <view class="cs_menu_item t-center">
        <image class="icon" src="../../static/logo.png" mode=""></image>
        <view class="text">
          佣金提现
        </view>
      </view>
      <view class="cs_menu_item t-center">
        <image class="icon" src="../../static/logo.png" mode=""></image>
        <view class="text">
          成员佣金
        </view>
      </view>
    </view>
    <!-- 筛选条件 -->
    <view class="cs_select t-ju-between">
      <view class="title">
        代收佣金明细
      </view>
      <u-dropdown class="cs_se_item">
        <u-dropdown-item v-model="value" title="全部" :options="options" @change="change"></u-dropdown-item>
      </u-dropdown>
    </view>
    <!-- 列表 -->
    <view class="cs_list">
      <view class="t-ju-between">
        <view class="span1">
          待分用
        </view>
        <view class="span2">
          +￥50
        </view>
      </view>
      <view class="t-ju-between">
        <view class="span3">
          设计套餐一
        </view>
        <view class="span4">
          2023-04-12 14:38:09
        </view>
      </view>
    </view>
    <view class="cs_list">
      <view class="t-ju-between">
        <view class="span1">
          待分用
        </view>
        <view class="span2">
          +￥50
        </view>
      </view>
      <view class="t-ju-between">
        <view class="span3">
          设计套餐一
        </view>
        <view class="span4">
          2023-04-12 14:38:09
        </view>
      </view>
    </view>
    <view class="cs_list">
      <view class="t-ju-between">
        <view class="span1">
          待分用
        </view>
        <view class="span2">
          +￥50
        </view>
      </view>
      <view class="t-ju-between">
        <view class="span3">
          设计套餐一
        </view>
        <view class="span4">
          2023-04-12 14:38:09
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  const value = ref('')
  const options = ref([{
      label: '默认排序',
      value: 1,
    },
    {
      label: '距离优先',
      value: 2,
    },
    {
      label: '价格优先',
      value: 3,
    }
  ])

  const change = (e) => {
    console.log(e, '选中的东西');
  }
</script>

<style lang="scss">
  .commission {
    .cs_header {
      padding: 30rpx;
      background-color: #fff;

      .cs_hd_left,
      .cs_hd_right {
        font-size: 24rpx;
        line-height: 40rpx;
        text-align: center;
      }

      .cs_hd_shu {
        height: 80rpx;
        border-right: 2rpx solid #D7D7D7;
      }
    }

    .cs_menu {
      background-color: #fff;
      padding: 20rpx;

      .cs_menu_item {
        flex-wrap: wrap;

        .icon {
          margin-bottom: 10rpx;
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;
        }

        .text {
          width: 100%;
          font-size: 24rpx;
          text-align: center;
        }
      }
    }

    .cs_select {
      margin-bottom: 5rpx;
      padding: 10rpx 30rpx;
      background-color: #fff;

      .title {
        flex: 3;
        font-size: 28rpx;
        font-weight: 700;
      }

      .cs_se_item {
        .u-dropdown__content__mask {
          background-color: transparent;
        }

        // width: 300rpx !important;
      }
    }

    .cs_list {
      padding: 10rpx 30rpx;
      background-color: #fff;
      font-size: 24rpx;
      line-height: 50rpx;

      .span2 {
        font-weight: 700;
      }

      .span3,
      .span4 {
        color: #8A8A8A;
      }
    }
  }
</style>